<template>
  <Modal :closable="false" v-model="visible" :title="title">
    <Form ref="form" v-if="visible" class="formList" :model="form" :rules="rules">

      <FormItem v-if="currentTab === 'storage'" label="储位名称" required prop="storageId">
        <Select v-model="form.storageId">
          <Option v-for="item in storageList" :key="item.id" :value="item.id" :label="item.storageName"></Option>
        </Select>
      </FormItem>


      <template v-for="(item, index) in form.keys" >

        <div :key="index" v-if="currentTab === 'storage'">
          <Row :gutter="24">
            <Col span="10">
            <FormItem label="投入物料" :prop="'items.' + index + '.putMaterialId'">
              <Select v-model="item.putMaterialId">
                <Option v-for="i in materialList" :key="i.id" :value="i.id" :label="i.materialName"></Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10" offset="1">
            <FormItem label="投入物料与产品比" :prop="'items.' + index + '.numPutCompare'">
              <Input type="number" v-model="item.numPutCompare"></Input>
            </FormItem>
            </Col>

            <div class="buttonDel"  v-if="index!==0">
              <Button @click="handleRemove(index)">-</Button>
            </div>
          </Row>

        </div>

      </template>

      <Row v-if="currentTab === 'storage'">
        <Col span="12" offset="3">
        <Button type="dashed" long @click="handleAdd" icon="md-add">投入物料</Button>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="10">
        <FormItem v-if="currentTab === 'storage'" label="产出物料" required prop="outMaterialId">
          <Select v-model="form.outMaterialId">
            <Option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.materialName"></Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="10" offset="1">
        <FormItem v-if="currentTab === 'storage'" label="产出物料与产品比" required prop="numPutCompare">
          <Input type="number" v-model="form.numPutCompare" placeholder="请输入产出物料与产品比" class="inputBorder"></Input>
        </FormItem>
        </Col>
      </Row>


      <FormItem v-if="currentTab === 'equipment'" label="设备名称" required prop="equipmentId">
        <Select v-model="form.equipmentId" placeholder="请输入设备名称">
          <Option v-for="item in equipmentList" :key="item.id" :value="item.id" :label="item.equipmentName"></Option>
        </Select>
      </FormItem>
      <FormItem v-if="currentTab === 'tool'" label="夹具编码" required prop="toolingId">
        <Select v-model="form.toolingId" placeholder="请输入夹具编码">
          <Option v-for="item in materialAllApiList" :key="item.id" :value="item.id" :label="item.toolingCode"></Option>
        </Select>
      </FormItem>
      <FormItem v-if="currentTab === 'quality'" label="质检名称" required prop="qualityName">
        <Input type="text" v-model="form.qualityName" placeholder="请输入质检名称" class="inputBorder"></Input>
      </FormItem>
      <FormItem v-if="currentTab === 'quality'" label="质检类型" required prop="qualityType">
        <Select v-model="form.qualityType">
          <Option v-for="item in quality" :key="item" :value="item" :label="item"></Option>
        </Select>
      </FormItem>
      <Row v-if="currentTab === 'quality'">
        <template v-for="(item, index) in form.keys">
          <FormItem :key="index" :label="'质检项' + (Number(index) + 1)" :prop="'key' + index">
            <Row>
              <Col span="14">
              <Input type="text" v-model="item.value"></Input>
              </Col>
              <Col span="4" offset="1"  v-if="index!==0">
              <Button @click="handleRemove(index)">-</Button>
              </Col>
            </Row>
          </FormItem>
        </template>
        <FormItem>
          <Row>
            <Col span="12" offset="3">
            <Button type="dashed" long @click="handleAdd" icon="md-add">质检项</Button>
            </Col>
          </Row>
        </FormItem>
      </Row>

    </Form>
    <div slot="footer" v-if="visible">
      <Button type="default" @click="closeModal">取消</Button>
      <Button type="primary" @click="handleSubmit('form')">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "CreateOrUpdateModal",
  props: {
    visible: Boolean,
    form: Object,
    title: String,
    handleAddSubmit: Function,
    closeModal: Function,
    materialData: Array,
    currentTab: String,
    storageList: Array,
    equipmentList: Array,
    materialAllApiList: Array,
    quality: Array,
    materialList: Array,
    handleAdd: Function,
    handleRemove: Function,
  },
  data() {
    return {
      rules: {
        storageId: [{ required: true, message: '请选择储位名称', trigger: 'blur' }],
        putMaterialId: [{ required: true, message: '请选择投入物料', trigger: 'blur' }],
        outMaterialId: [{ required: true, message: '请选择产出物料', trigger: 'blur' }],
        equipmentId: [{ required: true, message: '请选择设备名称', trigger: 'blur' }],
        toolingId: [{ required: true, message: '请输入夹具编码', trigger: 'blur' }],
        qualityName: [{ required: true, message: '请输入质检名称', trigger: 'blur' }],
        qualityType: [{ required: true, message: '请选择质检类型', trigger: 'blur' }],
      },
    };
  },
  methods: {
    getMaterialName(materialId) {
      // 根据物料ID获取物料名称
      return this.materialList.find((item) => item.id === materialId)?.materialName || '未知物料';
    },
    closeModal() {
      this.visible = false;
    },
    handleSubmit(formName) {
      console.log(this.form, 'sss')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(formName);
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ivu-modal-mask {
  z-index: 999999 !important;
}

::v-deep .ivu-modal-wrap {
  z-index: 999999 !important;
}

.buttonDel {
  margin-top: 35px;
}
</style>